<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>H5整屏滑动特效</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="css/animate.min.css">

</head>

<body>
    <div id="box1">
        <div class="itembox">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="item">
                            <p>这是第一屏</p>
                            <p>简介</p>
                            <p>描述一</p>
                            <p>图片</p>
                            <p>往上拉</p>
                            <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是swiper</div>
                        </div>
                        <div class="item">
                            <p>这是第二屏</p>
                            <p>简介</p>
                            <p>描述一</p>
                            <p>图片</p>
                            <p>往上拉</p>
                            <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我的第二瓶的swiper</div>
                        </div>
                        <div class="item">
                            <p>这是第三屏</p>
                            <p>简介</p>
                            <p>描述一</p>
                            <p>图片</p>
                            <p>往上拉</p>
                        </div>
                        <div class="item">
                            <p>这是第四屏</p>
                            <p>简介</p>
                            <p>描述一</p>
                            <p>图片</p>
                            <p>到底了</p>
                        </div>

                     </div>
                </div>
            </div>

        </div>
    </div>

    <script src="js/touch.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script src="js/swiper-3.4.2.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js"></script>
    <script>
        $(function(){
            var h = $(document).height();
            var len = $("#box1 .item").length;
            var th = 0;
            var idx = 0;

            $(".itembox .item").eq(idx).addClass("on").siblings().removeClass('on');

            $("#box1").css({"height": h });
            $("#box1 .item").css({"height": h });

            touch.on(".itembox","swipeup",function(){ // 屏幕上滑
                if(th>=0&&th<(h*(len-1))){
                    th +=h;
                    idx +=1;
                    $(".itembox .item").eq(idx).addClass("on").siblings().removeClass('on');
                    $(".itembox").css({"transform": "translate3d(0,-"+ th +"px,0)"});
                }else{
                    th = h*(len-1);
                    $(".itembox").css({"transform": "translate3d(0,-"+ th +"px,0)"});
                }
            });

            touch.on(".itembox","swipedown",function(){ // 屏幕下滑
                if(th>0&&th<=(h*(len-1))){
                    th -=h;
                    idx -=1;
                    $(".itembox .item").eq(idx).addClass("on").siblings().removeClass('on');
                    $(".itembox").css({"transform": "translate3d(0,-"+ th +"px,0)"});
                }else{
                    th = 0;
                    $(".itembox").css({"transform": "translate3d(0,-"+ th +"px,0)"});
                }
            });
        })
    </script>

<script>        
          var mySwiper = new Swiper ('.swiper-container', {
          onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
          }, 
          onSlideChangeEnd: function(swiper){ 
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
          } 
          })        
  </script>
</body>
</html>